<template>
  <el-breadcrumb
    class="app-breadcrumb"
    separator="/"
  >
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="`${index}-${item}`">
        <span
          v-if="item.redirect==='noRedirect'||index==levelList.length-1||!item.path"
          class="no-redirect"
        >{{ item.meta&&item.meta.title||item.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta&&item.meta.title||item.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      // if (route.meta.routers) {
      //   this.levelList = route.meta.routers
      //   return
      // }
      this.getBreadcrumb()
    }
  },
  created() {
    // if (this.$route.meta.routers) {
    //   this.levelList = this.$route.meta.routers
    //   return
    // }
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      // 非父子级路由指定父级面包屑title和跳转路径
      const hasRedirectTo = this.hasRedirectTo()
      // 判断是否是三级以上面包屑 三级以上的面包屑通过手动配置进行插入
      const hasConfigBreadcrumb = this.hasConfigBreadcrumb()
      if (hasRedirectTo) {
        const { path, title } = hasRedirectTo
        matched.splice(1, 0, { path, meta: { title }})
      } else if (hasConfigBreadcrumb) {
        this.levelList = hasConfigBreadcrumb
        return
      }
      this.levelList = matched.filter(
        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
      )
    },
    // 判断是否有 非父子级路由指定父级面包屑title和跳转路径
    hasRedirectTo() {
      const { meta } = this.$route
      if (meta && meta.redirectTo) {
        return meta.redirectTo
      } else {
        return false
      }
    },
    // 判断是否是三级以上面包屑 三级以上的面包屑通过手动配置进行插入
    hasConfigBreadcrumb() {
      const { meta } = this.$route
      if (meta && meta.routers) {
        return meta.routers
      } else {
        return false
      }
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      // 多级面包屑 手动配置的
      if (!item.meta) {
        if (item.params) {
          if (item.query) {
            const params = this.dealParams(item.query)
            this.$router.push(`${item.path}/${sessionStorage.getItem(item.params)}?${params}`)
          } else {
            this.$router.push(`${item.path}/${sessionStorage.getItem(item.params)}`)
          }
        } else {
          if (item.query) {
            const params = this.dealParams(item.query)
            this.$router.push(`${item.path}?${params}`)
          } else {
            this.$router.push(item.path)
          }
        }
        return
      }
      // 根据路由自动生成的
      const { redirect, path } = item
      const { meta } = this.$route
      if (redirect) {
        if (meta && meta.parentRoute) {
          this.$router.push(meta.parentRoute.path)
          return
        }
        if (meta && meta.redirectTo) {
          this.$router.push(meta.redirectTo.path)
          return
        }
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    },
    dealParams(arr) {
      const isArray = Array.isArray(arr)
      let str = ''
      if (isArray) {
        arr.forEach(ele => {
          if (!sessionStorage.getItem(ele)) return
          str += `${ele}=${sessionStorage.getItem(ele)}&`
        })
      }
      return str.slice(0, -1)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 16px;
  line-height: 50px;
  // margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
